<template>
    <view :style="{'height':windowHeight, 'width':windowWidth,'background-color':'#F1F1F1'}">

        <scroll-view>
            <view>
                <view class="station-info-header"></view>
                <view>
                    <view v-for="stationField in stationFields" :key="stationField.field">
                        <view>
                            <uni-row class="oneLayer">
                                <uni-col :span="24">
                                    <uni-section v-bind:title="stationField.field" type="line">
                                        <van-button v-if="stationField.type === 'text_list'" icon="plus" type="primary" @click="addInputValue(stationField)" />
                                    </uni-section>
                                </uni-col>
                            </uni-row>
                            <view style="height:1rem"></view>
                            <uni-row class="twoLayer">
                                <uni-col :span="24">
                                    <uni-easyinput v-if="stationField.type === 'text'" type="text" v-model="stationField.values"/>
                                    <view v-if="stationField.type === 'radio'">
                                        <view class="uni-list-cell-db">
                                            <picker @change="bindPickerChange(stationField.field, $event)" :value="stationField.values" :range="stationField.reference_value">
                                                <uni-easyinput type="text" v-model="stationField.reference_value[stationField.values]" />
                                            </picker>
                                        </view>
                                    </view>
                                    <view v-if="stationField.type === 'text_list'" v-for="(fieldValue) in stationField.values">
                                        <uni-easyinput type="text" v-model="fieldValue.text" />
                                    </view>
                                </uni-col>
                            </uni-row>
                        </view>
                    </view>

                    <van-divider
                            style="color:#1989fa; boder-color:#1989fa"
                            content-position="left"
                    >
                        扩展属性
                    </van-divider>

                    <view v-for="extStationField in extStationFields" :key="extStationField.field">

                        <view>
                            <uni-row class="oneLayer">
                                <uni-col :span="24">
                                    <uni-section v-bind:title="extStationField.field" type="line">
                                        <van-button v-if="extStationField.type === 'text_list'" icon="plus" type="primary" @click="addInputValue(extStationField)" />
                                    </uni-section>
                                </uni-col>
                            </uni-row>
                            <view style="height:1rem"></view>
                            <uni-row class="twoLayer">
                                <uni-col :span="24">
                                    <uni-easyinput v-if="extStationField.type === 'text'" type="text" v-model="extStationField.values"/>
                                    <view v-if="extStationField.type === 'radio'">
                                        <view class="uni-list-cell-db">
                                            <picker @change="bindExtFieldsPickerChange(extStationField.field, $event)" :value="extStationField.values" :range="extStationField.reference_value">
                                                <uni-easyinput type="text" v-model="extStationField.reference_value[extStationField.values]" />
                                            </picker>
                                        </view>
                                    </view>
                                    <view v-if="extStationField.type === 'text_list'">
                                        <uni-list>
                                            <view v-for="value in extStationField.values">
<!--                                                <uni-list-item v-bind:title="value.text" ></uni-list-item>-->
                                                <uni-easyinput type="text" v-model="value.text" />
                                            </view>
                                        </uni-list>
                                    </view>
<!--                                    <view v-if="extStationField.type === 'text_list'" v-for="extValue in extStationField.values" >-->
<!--                                        <uni-easyinput type="text" v-model="extValue.text" />-->
<!--                                    </view>-->
                                </uni-col>
                            </uni-row>
                        </view>
                    </view>

                    <view style="height:2rem"></view>
                    <van-button type="primary" block @click="saveOrUpdate()">保存</van-button>
                </view>

            </view>
            <view class="station-info-footer"></view>
        </scroll-view>
    </view>

</template>

<script>
    export default {
        name: "StationInfoUpdate",
        data() {
            return {
                windowWidth: '375px',
                windowHeight: '667px',
                action: '',
                stationFields: [],
                // stationFields: [{"field":"台站号","type":"text","values":"G3742","reference_value":[]},{"field":"台站名称","type":"text","values":"明珠","reference_value":[]},{"field":"台站级别","type":"radio","values":"三级站","reference_value":["新建站","一级站","二级站","三级站","城市气候站","暂无"]},{"field":"台站位置","type":"text","values":"盐田区盐田街道明珠社区盐田路1号市外国语学校高中部4栋楼顶","reference_value":[]},{"field":"经度","type":"text","values":22.58388889,"reference_value":[]},{"field":"纬度","type":"text","values":114.24305556,"reference_value":[]},{"field":"海拔","type":"text","values":56.0,"reference_value":[]},{"field":"站点离地面高度","type":"text","values":25.0,"reference_value":[]},{"field":"气压高度","type":"text","values":1.5,"reference_value":[]},{"field":"品牌","type":"text","values":"MAWS301","reference_value":[]},{"field":"型号","type":"text","values":"VAISALA","reference_value":[]},{"field":"区域","type":"text","values":"盐田区","reference_value":[]},{"field":"街道办","type":"text","values":"盐田街道","reference_value":[]},{"field":"站点联系人","type":"text","values":"唐工","reference_value":[]},{"field":"站点联系人电话","type":"text","values":"25282130","reference_value":[]},{"field":"主管人员","type":"text_list","values":[{"text":"高瑞泉"},{"text":"陈星登"},{"text":"卢超"}],"reference_value":[]},{"field":"维护公司","type":"text","values":"深圳市卓菲设备成套工程有限公司","reference_value":[]},{"field":"维护人员","type":"text_list","values":[{"text":"余伟志"},{"text":"谭忠伟"},{"text":"朱火德"},{"text":"吴洪柱"}],"reference_value":[]},{"field":"巡检周期","type":"text","values":30,"reference_value":[]},{"field":"抢修时间","type":"text","values":12,"reference_value":[]}],
                extStationFields: [],
                // extStationFields: [{"field":"GPRS卡号码","type":"text","values":13600191431,"reference_value":[]},{"field":"CDMA卡号码","type":"text","values":"X","reference_value":[]},{"field":"配置文件","type":"text_list","values":[{"text":"SZ1_V14.adc"},{"text":"X"}],"reference_value":[]},{"field":"防鸟罩","type":"radio","values":0,"reference_value":["否","是"]},{"field":"太阳能","type":"radio","values":0,"reference_value":["否","是"]},{"field":"市电","type":"radio","values":1,"reference_value":["否","是"]},{"field":"太阳能功率","type":"text","values":"N","reference_value":[]},{"field":"GPRS DTU序列号","type":"text","values":"H7710-CGS_7710C201212SG21103","reference_value":[]},{"field":"CDMA DTU序列号","type":"text","values":"X","reference_value":[]},{"field":"温湿度序列号（2米）","type":"text_list","values":[{"text":"HMP155_L4820424"}],"reference_value":[]},{"field":"温湿度序列号（10米）","type":"text_list","values":[{"text":"X"}],"reference_value":[]},{"field":"风向风速（2米）","type":"text_list","values":[{"text":"X"}],"reference_value":[]},{"field":"风向风速（10米）","type":"text_list","values":[{"text":"WMT703 L4550299"}],"reference_value":[]},{"field":"气压序列号","type":"text_list","values":[{"text":"PTB330_L4520193"}],"reference_value":[]},{"field":"雨量序列号","type":"text_list","values":[{"text":"SL3-1_201509682"},{"text":"X"},{"text":"X"}],"reference_value":[]},{"field":"能见度","type":"text_list","values":[{"text":"X"}],"reference_value":[]},{"field":"二氧化碳","type":"text_list","values":[{"text":"X"}],"reference_value":[]},{"field":"总辐射","type":"text_list","values":[{"text":"X"}],"reference_value":[]},{"field":"GPS校时","type":"text","values":"GPS19X_2J5034379","reference_value":[]},{"field":"机箱","type":"text","values":"zanwu","reference_value":[]},{"field":"301采集器","type":"text_list","values":[{"text":"QML201A_L3718508"},{"text":"X"}],"reference_value":[]},{"field":"DSU232","type":"text_list","values":[{"text":"DSU232 524146"},{"text":"X"}],"reference_value":[]},{"field":"DSI486","type":"text_list","values":[{"text":"DSI486_541221"},{"text":"X"}],"reference_value":[]},{"field":"QBR101充电模块","type":"text_list","values":[{"text":"zanwu"}],"reference_value":[]},{"field":"净辐射","type":"text_list","values":[{"text":"X"}],"reference_value":[]},{"field":"红外地温","type":"text_list","values":[{"text":"X"}],"reference_value":[]},{"field":"土壤温度","type":"text_list","values":[{"text":"X"},{"text":"X"},{"text":"X"},{"text":"X"}],"reference_value":[]},{"field":"土壤热通量","type":"text_list","values":[{"text":"X"},{"text":"X"}],"reference_value":[]},{"field":"土壤湿度","type":"text_list","values":[{"text":"X"},{"text":"X"}],"reference_value":[]},{"field":"蓄电池","type":"text_list","values":[{"text":"BT_201606110"},{"text":"BT_201606221"}],"reference_value":[]},{"field":"DTU_GPRS","type":"text","values":"","reference_value":[]},{"field":"通信卡GPRS","type":"text_list","values":[],"reference_value":[]},{"field":"温度序列号（2米）","type":"text_list","values":[],"reference_value":[]},{"field":"风速序列号（2米）","type":"text_list","values":[],"reference_value":[]},{"field":"风向序列号（2米）","type":"text_list","values":[],"reference_value":[]},{"field":"3103采集器","type":"text_list","values":[],"reference_value":[]}],
            }
        },
        onLoad: function(options) {
            this.windowWidth = options.windowWidth
            this.windowHeight = options.windowHeight
            this.stationCode = options.stationCode
            this.action = options.action

            const url = (action) => {
                return action === 'create' || action === '' ? '/stations/fields' : '/stations/' + this.stationCode + '/fields'
            }
            this.fetchStationFields(this.action, url(this.action))
        },
        methods: {
            bindPickerChange(field, e) {
                this.stationFields.filter(stationField => stationField.field === field)
                    .map(stationField => stationField.values = e.target.value)
            },
            bindExtFieldsPickerChange(field, e) {
                this.extStationFields.filter(extStationField => extStationField.field === field)
                    .map(extStationField => extStationField.values = e.target.value)
            },
            addInputValue(field) {
                field.values.push({text: ''})
            },
            fetchStationFields(action, url) {
                uni.showLoading()
                this.uniRequest({
                    url: url,
                    method: 'GET',
                }).then(res => {
                    console.log('fetchStationFields Response: ' , res)
                    this.stationFields = res.data.baseFields
                    this.extStationFields = res.data.extFields

                    this.stationFields.filter(item => item.type === 'radio')
                        .map(item => {
                            item.values = item.reference_value.indexOf(item.values)
                        })
                    uni.hideLoading()
                }).catch(err => {
                    console.error('fetchStationFields Error: ' , err)
                    uni.hideLoading()
                    uni.showToast({
                        icon: 'error',
                        title: '台站信息获取失败！ ',
                        duration: 2000
                    })
                })
            },

            saveOrUpdate() {
                console.log('stationFields: ', this.stationFields)
                console.log('extStationFields: ', this.extStationFields)
                uni.showToast({
                    title: '台站提交'
                })

                this.uniRequest({
                    url: '/stations',
                    method: 'POST',
                    data: {
                        stationFields: this.stationFields,
                        extStationFields: this.extStationFields
                    }
                }).then(res => {
                    console.log('StaionInfo saveOrUpdate Success! Response: ', res)
                    uni.hideLoading()
                    uni.showToast({
                        icon: 'success',
                        title: '台站信息提交成功！ ',
                        duration: 2000,
                        success: () => {
                            setTimeout(() => {
                                let pages = getCurrentPages(); // 当前页面
                                let beforePage = pages[pages.length - 2]; // 上一页
                                uni.navigateBack({
                                    delta: 1,
                                    animationType: 'pop-out',
                                    animationDuration: 200,
                                    success: () => {
                                        beforePage.onLoad(beforePage.options)
                                    }
                                });
                            }, 1000)
                        }
                    })
                }).catch(err => {
                    console.error('StaionInfo saveOrUpdate Error: ', err)
                    uni.hideLoading()
                    uni.showToast({
                        icon: 'error',
                        title: '台站信息提交失败,请检查提交数据！',
                        duration: 2000
                    })
                })

            }

        }
    }
</script>

<style scoped>

    .station-info-header {
        height: 2rem;
    }

    .station-info-footer {
        height: 2rem;
    }

    .row-height {
        height: 3rem;
    }
</style>